<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本</title>
</head>
<style>
/*inline-block 设置min-max width height 通过内容自适应匡高 float
	文字不换行 。其他可以换
	汉字字符和英文字符区别对待。。。
	不不不 。。。只是它把我一串当成一个字符了。。。。。。
	word-wrap:;ie的 
	overflow-wrap css3规范  
		normal正常单词结束处换行
		break-word 强制分割换行
	letter-spacing 文字间距行为
		默认间距 normal 等同0
		.3em 3px .3px inherit 

	text-align 相对块父元素如何对齐 不控制块元素自己的对齐 控制里面行内元素的对齐
		start end 和内容方向有关
		right center left ...
		justify 

	text-justify:text-align属性设置为justify时 齐行方法。。。none auto inter-word 				inter-character distribute
	text-transform : 文本大小写;
	white-space :如何处理元素空白;
	word-break:怎样在单词内断行;
	word-spacing:标签和单词间距行为 percentages length;

...*/
*{
	background-color: #333;
	color:#fff;
}
h4{
	text-align: center;
}
	div{
		min-width: 100px;
		max-width: 300px;
		min-height: 50px;
		float: left;
		background-color: red;
		/*word-wrap: break-word;。。。这是ie的

		word-break: break-all;*/
	}
	.span{
		display: inline-block;
		min-height: 30px;
		max-height: 100px;
		min-width: 30px; 
		max-width: 100px; 
		background-color:yellow;
		word-wrap: break-word;
		word-break: break-all;
		padding: 10px;
	}
	.l1{
		letter-spacing: 1em;
	}
	.l2{
		letter-spacing: 5px;
	}
	.l3{
		letter-spacing: -3px;
	}
	.l4{
		letter-spacing: .3em;
	}
	p{
		margin:2px auto;
		width: 60%;
		border: 1px solid gray;
	}
</style>
<body>
	<!-- <div><span>DADAA AAAAAAAA AAAAAAA AAAAAWQW QW QW QWQ我有有发发发法发顺丰是发生发11111111111111111111AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA发阿凡达发发顺丰三分发发发粉色法师法是发生发发方式11111111111111111111111111111111啊发发发沙发ASADASDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</span></div><br>
	<span class="span"><span>1212131321112312eeqeqfseqeqfsdfsdfs</span></span>
	<div><div style="width:200px;border:1px solid yellow;"></div>
	<div style="width: 100px;height: 200px;border: 1px solid black"></div>
	<div style="width: 100px;height: 200px;border: 1px solid black"></div> -->
	<!-- <p style="width: 120px;border: 1px solid red">faf s a ff safs ffsf sfs fs fsf sf</p>
	<p style="width: 120px;border: 1px solid red">我是一头小猫录我是一头小猫录我是一头小猫录我是一头小猫录我是一头小猫录</p> -->
	<h4>letter-spacing</h4>
	<p class="">wohsi 我是 letter-spacing为 normal</p>
	<p class="l1">wohsi 我是 letter-spacing为 1em </p>
	<p class="l2">wohsi 我是 letter-spacing为 5px</p>
	<p class="l3">wohsi 我是 letter-spacing为 -3px</p>
	<p class="l4">wohsi 我是 letter-spacing为 .3em</p>
	<h4>text-align</h4>
	<p class="p1" style="width:600px;text-align:left;margin-top: 30px">wo shi text-align 属性值 为这个：<b>left</b>  </p>
	<p class="p2" style="width:600px;text-align:right">wo shi text-align 属性值 为这个：<b>right</b></p>
	<p class="p3" style="width:600px;text-align:center">wo shi text-align 属性值 为这个：<b>center</b></p>
	<p class="p4" style="width:600px;text-align:justify">wo shi text-align 属性值 为这个：<b>justify</b>more messge test mmm 测试放松放松 发 啊打发
		<b>两端对齐 最后一行无效</b></p>
	<p class="p5" style="width:600px;text-align:justify-all">wo shi text-align 属性值 为这个：<b>justify-all--最后一行也生效</b></p>
	<p class="p6" style="width:600px;text-align:start">wo shi text-align 属性值 为这个：<b>start</b><b>-方向相关</b></p>
	<p class="p7" style="width:600px;text-align:end">wo shi text-align 属性值 为这个：<b>end</b><b>-方向相关</b></p>
	<p class="p8" style="width:600px;text-align:match-parent;">wo shi text-align 属性值 为这个：<b>match-parent</b></p>
	<h4>text-indent</h4>
	<p style="text-indent:inherit;margin-top: 30px">wo shi indent 属性值为 ；； ；12121 <b>inherit -default</b></p>
	<p style="text-indent:3em">wo shi indent 属性值为 ；； ；12121 <b>3em</b></p>
	<p style="text-indent:40px">wo shi indent 属性值为 ；； ；12121 <b>40px</b></p>
	<p style="text-indent:15%">wo shi indent 属性值为 ；； ；12121 <b>15%</b></p>
	<p style="text-indent:each-line">wo shi indent 属性值为 ；； ；12121 <b>each-line===未被实现===br 段行后第一行</b></p>
	<p style="text-indent:hanging">wo shi indent 属性值为 ；； ；12121 <b>hanging===未被实现=第一行之外被缩进</b></p>
	<h4>text-transform</h4>
	<p style="text-transform:none;margin-top: 30px">woAAA sfdAhi AAAbb <b>none--阻止大小写转换</b>	</p>
	<p style="text-transform:full-width">woAAA sfdAhi AAAbb<b>full-width--方形</b></p>
	<p style="text-transform:capitalize;">woAAA sfdAhi AAAbb<b>capitalize--首字母大写，其它不变</b></p>
	<p style="text-transform:uppercase">woAAA sfdAhi AAAbb<b><span style="text-transform: none;border: 1px solid yellow">uppercase</span><-被none阻止--所有大写</b></p>
	<p style="text-transform:lowercase;">woAAA sfdAhi AAAbb<b>lowercase--所有小写</b></p>
	<h4>white-space</h4>
	<p style="white-space:pre;margin-top: 20px"><b>pre:保留,</b>   
	enter   i i  i</p>
	<p style="white-space:normal"><b>normal,合并。换行当空格</b>   
	enter   i i  i</p>
	<p style="white-space:nowrap"><b>nowrap,空白合并,死不换行</b>   
	enter   i i  i</p>
	<p style="white-space:pre-wrap"><b>pre-wrap,空白保留,换行 br换行</b>   
	enter   i i  i</p>
	<p style="white-space:pre-line"><b>pre-line：空白合并,换行br换行</b>   
	enter   i i  i</p>
	<h4>word-break</h4>
	<p style="width:600px;word-break:normal;margin-top: 20px"><b>normal</b>Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
	<p style="width:600px;word-break:break-all"><b>break-all(中.日.韩：任意字符断行)</b>Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
	<p style="width:400px;word-break:keep-all"><b>keep-all（ckj不断行）</b>Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
	<p style="width:600px;word-break:break-word"><b>break-word：强断</b>Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
	<h4>word-spacing</h4>
 <p style="word-spacing:normal;margin-top: 20px">
 	<b>normal</b> an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal
 </p>
 <p style="word-spacing:8px">
 	<b>8px</b> an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal
 </p>
 
 <p style="word-spacing:10%;margin-bottom: 200px">
 	<b>10%</b> an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal
 </p>
</div>
</body>
</html>